<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>页面路由案例</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="div1">
        <!--
        前端路由，也称为客户端路由，是单页应用（SPA）中的核心技术之一。它通过在浏览器中修改URL而不向服务器发送请求来实现页面的切换，
        从而在不重新加载整个页面的情况下，实现在不同视图或组件之间的导航。
        -->

        <!-- 显示组件 -->
        <a href="#/homepage" >网站主页</a>
        <a href="#/technology" >科技信息</a>
        <a href="#/financial" >财经信息</a>
        <a href="#/entertainment" >娱乐信息</a>
        <!-- 
          :is 通过该属性指定组件名称，会把对应名称的组件渲染到该地方component标签所在位置。
          可以把component标签当作是组件的占位符。
         -->
        <component :is="com_name" ></component>     <!--<component> 是一个特殊的内置组件，它允许你动态地绑定一个组件到它的 is 属性上。
                                                        <component> 组件自身不会渲染成一个真实的 DOM 元素，而是根据 is 属性的值来渲染为另一个组件。-->
    </div>

    <script>
      // 主页组件
      const homepage = {
        template: '<h1>网站主页</h1>'
      }

      // 科技组件
      const technology = {
        template: '<h1>科技信息</h1>'
      }

      // 财经组件
      const financial = {
        template: '<h1>财经信息</h1>'
      }

      // 娱乐组件
      const entertainment = {
        template: '<h1>娱乐信息</h1>'
      }
      
      const vm = new Vue({
        el: '#div1',
        data: {
          // 页面默认显示的组件名称
          com_name: 'homepage'
        },
        // 注册私有组件
        components: {
          homepage,
          technology,
          financial,
          entertainment
        }
      })

      // 通过 onhashchange来监听点击事件
      window.onhashchange = function() {        /*window.onhashchange 是 JavaScript 中的一个事件处理器，用于监听浏览器地址栏中的哈希值（URL 中的 # 后面的部分）的变化。
                                                 当 URL 的哈希部分发生改变时，onhashchange 事件就会被触发。*/
        /* 
          会获取到点击的超链接href属性对应的值
          根据location.hash的值,来实现内容的改变.
         */
        console.log(location.hash);         //用于获取或设置 URL 中的哈希值（即 URL 中从 # 开始的部分）
        //    #/homepage
        const current_con = location.hash.slice(1); //  去掉井号  /homepage
        switch(current_con) {
          case '/homepage':
            vm.com_name = 'homepage'
          break
          case '/technology':
            vm.com_name = 'technology'
          break
          case '/financial':
            vm.com_name = 'financial'
          break
          case '/entertainment':
            vm.com_name = 'entertainment'
          break
        }
      }
    </script>
  </body>
</html>